<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: pink;
				text-align: center;
				/*line-height: 200px;*/
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div>点我吧</div>
		
		<script type="text/javascript">
			var sheet=document.styleSheets[0];
			var rules=sheet.cssRules;
			var rule=rules[0];
			var div_width=parseInt(rule.style.width);
			var div_height=parseInt(rule.style.height);
			
			var div=document.getElementsByTagName("div")[0];
//			console.log(div.clientWidth,div.clientHeight);
			
			div.onmouseover=function(e){
				//200 200
//				console.log(div_height,div_width);
				while(1){
					rx=parseInt(Math.random()*((innerWidth-100)-0+1)+0);
					ry=parseInt(Math.random()*((innerHeight-100)-0+1)+0);
					console.log(rx,ry);
//					rxx=rx+"px";
//					ryy=ry+"px";
//					console.log(rxx,ryy);
					if(!((e.pageX>=rx)&&(e.pageX<=rx+100)&&(e.pageY>=ry)&&(e.pageY<=ry+100))){
						console.log(1);
//						div.style.transform='translateX('+rxx+')';
//						div.style.transform='translateY('+ryy+')';
						div.style.left=rx+"px";
						div.style.top=ry+"px";
						break;
					}
				}
			}
		</script>
	</body>
</html>
